import React, { FC, useState } from 'react'
import { useNavigate, Link } from 'react-router-dom'

import { Button, Space, Divider, Tag, Popconfirm, Modal, message } from 'antd'
import {
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
  CopyOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons'

import { updateQuestionService, duplicateQuestionService } from '../services/question'
import styles from './QuestionCard.module.scss'
import { useRequest } from 'ahooks'

type PropsType = {
  _id: string
  title: string
  isStar: boolean
  isPublished: boolean
  answerCount: number
  createdAt: string
  isDeleted?: boolean
}

const QuestionCard: FC<PropsType> = (props: PropsType) => {
  const nav = useNavigate()
  const { confirm } = Modal
  const { _id, title, createdAt, answerCount, isPublished, isStar, isDeleted } = props

  const [isStartStat, setIsStartStat] = useState(isStar)
  const { run: changeStar, loading: changeStarLoading } = useRequest(
    async () => {
      const res = await updateQuestionService(_id, { isStar: !isStartStat })
    },
    {
      manual: true,
      onSuccess() {
        setIsStartStat(!isStartStat)
      }
    }
  )
  // function duplicate() {
  //   message.info('成功')
  //   console.log('copy')
  // }
  const { loading: duplicateLoading, run: duplicate } = useRequest(
    async () => await duplicateQuestionService(_id),
    {
      manual: true,
      onSuccess(res) {
        message.info('操作成功')
        nav(`/question/edit/${res.id}`)
      }
    }
  )

  const [delState, setDelState] = useState(false)
  const { loading: delLoading, run: delQuestion } = useRequest(
    async () => await updateQuestionService(_id, { isDeleted: true }),
    {
      manual: true,
      onSuccess() {
        message.info('删除成功')
        setDelState(true)
      }
    }
  )
  function del() {
    confirm({
      title: '确定删除该问卷吗',
      icon: <ExclamationCircleOutlined />,
      onOk: delQuestion
    })
  }
  if (delState) return null
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <div className={styles.left}>
          <Link to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}>
            <Space>
              {isStartStat ? <StarOutlined style={{ color: 'red' }} /> : ''}
              {title}
            </Space>
          </Link>
        </div>
        <div className={styles.right}>
          <Space>
            {isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>}
            <span>答卷：{answerCount}</span>
            {createdAt}
          </Space>
        </div>
      </div>
      <Divider style={{ margin: '12px 0' }} />
      <div className={styles['button-container']}>
        <div className={styles.left}>
          <Space>
            <Button
              icon={<EditOutlined />}
              size="small"
              onClick={() => nav(`/question/edit/${_id}`)}
            >
              编辑问卷
            </Button>
            <Button
              icon={<LineChartOutlined />}
              size="small"
              onClick={() => nav(`/question/stat/${_id}`)}
              disabled={!isPublished}
            >
              数据统计
            </Button>
          </Space>
        </div>
        <div className={styles.right}>
          <Space>
            <Button
              icon={<StarOutlined />}
              size="small"
              onClick={changeStar}
              disabled={changeStarLoading}
            >
              {isStartStat ? '取消标星' : '标星'}
            </Button>
            <Popconfirm title="确定复制吗" okText="确定" cancelText="取消" onConfirm={duplicate}>
              <Button icon={<CopyOutlined />} size="small" disabled={duplicateLoading}>
                复制
              </Button>
            </Popconfirm>

            <Button icon={<DeleteOutlined />} size="small" onClick={del} disabled={delLoading}>
              删除
            </Button>
          </Space>
        </div>
      </div>
    </div>
  )
}

export default QuestionCard
